<template>
  <div class="app-container">
    <ViewSessions @selected="selected" />
    <div v-if="isAssist">
      <el-table
        border
        :data="listExternal"
        :header-row-style="{
          'background-color': '#E6E6E6',
          'font-weight': 'bold',
          color: '#333',
        }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="orderCode"
          label="内部订单编号"
          width="160px"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="picCode"
          label="图号"
          widht="180px"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="picName"
          label="产品名称"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="amount"
          label="数量"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="manufacturer"
          label="外协厂商"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="arriveTime"
          label="外协到货时间"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="examiner"
          label="检验员"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="qualifiedAmount"
          label="合格数量"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="unqualifiedAmount"
          label="不合格数量"
        />
        
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="statusText"
          label="状态"
        ><template slot-scope="scope">
          <span
            v-if="scope.row.status != 42 || !isRole"
          >{{ scope.row.statusText }}</span
          >
          <el-button
            v-if="scope.row.status == 42 && isRole"
            type="text"
            size="mini"
            @click="repairableClick(scope.row)"
          >{{ scope.row.statusText }}</el-button
          >
        </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="specialAdoption"
          label="特采放行"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="remark"
          label="备注"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="cal"
          label="操作"
          width="150px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 25"
              type="text"
              size="mini"
              @click="qualityClick(scope.row)"
            >品检</el-button
            >
            <el-button
              v-if="scope.row.status == 24"
              type="text"
              size="mini"
              @click="arrivalClick(scope.row)"
            >确认到货</el-button
            >
            <el-button
            type="text"
            size="mini"
            @click="seePaper(scope.row)"
          >查看图纸</el-button
          >
            
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else>
      <el-table
        border
        :data="listQuality"
        :header-row-style="{
          'background-color': '#E6E6E6',
          'font-weight': 'bold',
          color: '#333',
        }"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        height="650"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="orderCode"
          label="内部订单编号"
          width="160px"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="picCode"
          label="图号"
          width="180px"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="picName"
          label="产品名称"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="amount"
          label="数量"
        /><el-table-column
          show-overflow-tooltip
          align="center"
          prop="examiner"
          label="检验员"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="qualifiedAmount"
          label="合格数量"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="unqualifiedAmount"
          label="不合格数量"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="statusText"
          label="状态"
        ><template slot-scope="scope">
          <span
            v-if="scope.row.status != 42 || !isRole"
          >{{ scope.row.statusText }}</span
          >
          <el-button
            v-if="scope.row.status == 42 && isRole"
            type="text"
            size="mini"
            @click="repairableClick(scope.row)"
          >{{ scope.row.statusText }}</el-button
          >
        </template>
        </el-table-column>
        
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="specialAdoption"
          label="特采放行"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="remark"
          label="备注"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="cal"
          width="150"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 4"
              type="text"
              size="mini"
              @click="qualityClick(scope.row)"
            >品检</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="seePaper(scope.row)"
            >查看图纸</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="page"
      :total="total"
      :page-size="limit"
      style="padding: 30px 0; text-align: end"
      layout="total, prev, pager, next,jumper"
      @current-change="fetchData"
    />
    <el-dialog :visible.sync="dialog" @close="closeDialog">
      <el-form
        ref="inspection"
        :model="inspection"
        :rules="validateRules"
        label-width="120px"
      >
        <el-form-item label="合格数量：" prop="qualifiedAmount">
          <el-col :span="8">
            <el-input
              v-model="inspection.qualifiedAmount"
              size="small"
              type="number"
              on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
              placeholder="请输入合格数量"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="不合格数量：" prop="unqualifiedAmount">
          <el-col :span="8">
            <el-input
              v-model="inspection.unqualifiedAmount"
              size="small"
              type="number"
              on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
              placeholder="请输入不合格数量"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="检验时间：" prop="qualifiedTime">
          <el-col :span="6">
            <el-date-picker
              v-model="inspection.qualifiedTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择检验时间："
            />
          </el-col>
        </el-form-item>
        <el-form-item label="检验员：" prop="examineId">
          <el-select
            v-model="inspection.examineId"
            clearable
            placeholder="检验员"
          >
            <el-option
              v-for="item in listUserP"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否合格：">
          <el-radio-group v-model="inspection.radio">
            <el-radio :label="43">合格</el-radio>
            <el-radio :label="44">不合格</el-radio>
          </el-radio-group>
          <el-radio-group
            v-if="inspection.radio == 44"
            v-model="inspection.radioOne"
          >
            <el-radio :label="41">报废</el-radio>
            <el-radio :label="42">可维修</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="inspection.radio == 44" label="备注：" prop="repairableDataRemark" >
          <el-select
            v-model="repairable.repairableDataRemark"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in listRepairableRemark"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showClick('inspection')"
        >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogArrival" @close="closeDialogArrival">
      <el-form
        ref="arrival"
        :model="arrival"
        :rules="validateArrival"
        label-width="120px"
      >
        <el-form-item label="到货数量：" prop="total">
          <el-col :span="8">
            <el-input
              v-model="arrival.total"
              size="small"
              type="number"
              on-keypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
              placeholder="请输入到货数量"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="到货时间：" prop="arriveTime">
          <el-col :span="6">
            <el-date-picker
              v-model="arrival.arriveTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择到货时间："
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showArrivalClick('arrival')"
        >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="pdfUrlShow"
      title="图纸路径"
      @close="pdfUrlShow = false"
    >
      <el-form label-width="120px">
        <el-form-item label="图纸路径：">
          <div>
            <el-button
              v-for="(url, index) in pdfUrl"
              :key="index"
              style="text-align: left"
              type="text"
            >
              <a :href="url" style="white-space: initial" target="_blank">{{
                url
              }}</a>
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="工艺：">
          <div v-for="(item, index) in artFiles" :key="index">
            <a
              :href="item"
              style="color: #409eff; border-bottom: #409eff 1px solid"
              target="_blank"
            >{{ item }}</a
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogRepairable">
      <el-form
        ref="arrival"
        label-width="120px"
      >
        <el-form-item label="状态：">
          <el-select
            v-model="repairable.repairableData"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in listRepairable"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="showRepairableClick()"
        >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import ViewSessions from './ViewSessions.vue'
import user from '../../api/acl/user.js'
export default {
  components: {
    ViewSessions
  },
  data() {
    return {
      isRole: window.sessionStorage.getItem('userName') == 'admin' || window.sessionStorage.getItem('userName') == 'cs'
      || window.sessionStorage.getItem('userName') == '曹浉' || window.sessionStorage.getItem('userName') == 'caoshi',
      repairable: {
        repairableData: '',
        repairableDataRemark: '',
        productId: '',
        assistId: '',
        itemId: ''
      },
      dialogRepairable: false,
      listRepairable: [
        {
          value: '业务放行',
          label: '业务放行'
        },
        {
          value: '生产放行',
          label: '生产放行'
        },
        {
          value: '品质特采',
          label: '品质特采'
        }
      ],
      listRepairableRemark: [
        {
          value: '外观不良',
          label: '外观不良'
        },
        {
          value: '形位公差',
          label: '形位公差'
        },
        {
          value: '尺寸不良',
          label: '尺寸不良'
        },
        {
          value: '牙孔不良',
          label: '牙孔不良'
        },
        {
          value: '漏加工',
          label: '漏加工'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      pdfUrl: '',
      pdfUrlShow: false,
      artFiles: [],
      arrival: {
        productId: '',
        total: '',
        arriveTime: '',
        id: '',
        assistId: ''
      },
      dialogArrival: false,
      listUserP: [],
      validateArrival: {

      },
      validateRules: {
      },
      dialog: false,
      inspection: {
        remark: '',
        radioOne: '',
        radio: '',
        productId: '',
        assistIntoId: '',
        assistId: '',
        itemId: '',
        examineId: '',
        qualifiedTime: '',
        total: '',
        qualifiedAmount: '',
        unqualifiedAmount: '',
        id: ''
      },
      isAssist: false, // 默认是品检-true
      listExternal: [],
      listQuality: [],
      query: {
        isAssist: '0',
        examiner: '',
        orderCode: '',
        status: '',
        picCode: '',
        manufacturer: ''
      },
      page: 1,
      limit: 10,
      total: ''
    }
  },
  mounted() {
    this.listCheck()
  },
  methods: {
    showRepairableClick() {
      user.updateCheckStatus({
        productId: this.repairable.productId,
        assistId: this.repairable.assistId,
        itemId: this.repairable.itemId,
        specialAdoption: this.repairable.repairableData,
        specialAdoptionRemark: this.repairable.repairableDataRemark,
        status: '43'
      }).then(response => {
        this.dialogRepairable = false
        this.$message({
          message: '完成',
          duration: 1000
        })
        this.listCheck()
      })
    },
    repairableClick(row) {
      this.repairableData = ''
      this.repairableDataRemark = ''
      this.dialogRepairable = true
      this.repairable.productId = row.productId
      if (this.query.isAssist == 1) {
        this.repairable.assistId = row.assistId
      } else {
        this.repairable.itemId = row.itemId
      }
    },
    closeDialogArrival() {
      this.arrival = {
        id: '',
        total: '',
        arriveTime: '',
        productId: '',
        assistId: ''
      }
      this.$refs.arrival.resetFields()
    },
    closeDialog() {
      this.inspection = {
        examineId: '',
        qualifiedTime: '',
        total: '',
        qualifiedAmount: '',
        unqualifiedAmount: '',
        id: ''
      }
      this.$refs.inspection.resetFields()
    },
    showClick(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          let param
          if (this.query.isAssist == 1) {
            param = {
              id: this.inspection.id,
              examineId: this.inspection.examineId,
              qualifiedTime: this.inspection.qualifiedTime,
              // total: this.inspection.total,
              qualifiedAmount: this.inspection.qualifiedAmount,
              unqualifiedAmount: this.inspection.unqualifiedAmount,
              'productId': this.inspection.productId,
              'status': this.inspection.radio == 43 ? this.inspection.radio : this.inspection.radioOne,
              'isAssist': 1,
              'assistIntoId': this.inspection.assistIntoId,
              'assistId': this.inspection.assistId,
              'remark': this.repairable.repairableDataRemark
            }
          } else {
            param = {
              id: this.inspection.id,
              examineId: this.inspection.examineId,
              qualifiedTime: this.inspection.qualifiedTime,
              // total: this.inspection.total,
              qualifiedAmount: this.inspection.qualifiedAmount,
              unqualifiedAmount: this.inspection.unqualifiedAmount,
              'productId': this.inspection.productId,
              'status': this.inspection.radio == 43 ? this.inspection.radio : this.inspection.radioOne,
              'isAssist': 0,
              itemId: this.inspection.itemId,
              'assistId': this.inspection.assistId,
              'remark': this.repairable.repairableDataRemark
            }
          }
          user
            .assistCheck(param)
            .then(response => {
              this.dialog = false
              this.$message({
                message: '品检完成',
                duration: 1000
              })
              this.listCheck()
            })
        }
      })
    },
    showArrivalClick(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          user
            .assistArrive({
              id: this.arrival.id,
              total: this.arrival.total,
              arriveTime: this.arrival.arriveTime,
              status: 25,
              productId: this.arrival.productId,
              assistId: this.arrival.assistId
            })
            .then(response => {
              this.dialogArrival = false
              this.$message({
                message: '确认完成',
                duration: 1000
              })
              this.listCheck()
            })
        }
      })
    },
    arrivalClick(row) {
      this.dialogArrival = true
      this.arrival.id = row.id
      this.arrival.productId = row.productId
      this.arrival.total = ''
      this.arrival.arriveTime = ''
      this.arrival.assistId = row.assistId
    },
    qualityClick(row) {
      this.listUser()
      this.dialog = true
      this.inspection.id = row.id
      this.inspection.total = ''
      this.inspection.qualifiedAmount = ''
      this.inspection.unqualifiedAmount = ''
      this.inspection.examineId = ''
      this.inspection.qualifiedTime = ''
      this.inspection.assistId = row.assistId
      this.inspection.productId = row.productId
      if (this.query.isAssist == 1) {
        this.inspection.assistIntoId = row.assistIntoId
      } else {
        this.inspection.itemId = row.itemId
      }
    },
    seePaper(row) {
      user.listImageFolder(row).then(response => {
        if (response && response.imageUrl) {
          this.pdfUrl =
            typeof response.imageUrl === 'string'
              ? [response.imageUrl]
              : response.imageUrl || []
          this.pdfUrlShow = true
          this.artFiles = response.artFiles
        }
      })
    },
    listUser() {
      user.listUser({
        department: '8',
        limit: 10000,
        page: 1
      }).then((response) => {
        console.log(response)
        this.listUserP = []
        for (let i = 0; i < response.list.length; i++) {
          const obj = {}
          if (
            response.list[i].fullName != '' &&
							response.list[i].fullName != null &&
							response.list[i].fullName != undefined
          ) {
            obj.value = response.list[i].id
            obj.label = response.list[i].fullName
            this.listUserP.push(obj)
          }
        }
      })
    },
    selected(val) {
      this.query = val
      if (val.isAssist == 0) {
        this.isAssist = false
      } else if (val.isAssist == 1) {
        this.isAssist = true
      }
      this.page = 1
      this.listCheck()
    },
    fetchData(val) {
      this.page = val
      this.listCheck()
    },
    listCheck() {
      user.listCheck({
        'examiner': this.query.examiner,
        'innerCode': this.query.orderCode,
        'isAssist': this.query.isAssist,
        'limit': this.limit,
        'manufacturer': this.query.manufacturer,
        'page': this.page,
        'picCode': this.query.picCode,
        'status': this.query.status
      }).then(response => {
        this.total = response.total
        if (this.query.isAssist == 1) {
          for (let i = 0; i < response.list.length; i++) {
            if (response.list[i].status == 22) {
              response.list[i].statusText = '已外协'
            } else if (response.list[i].status == 23) {
              response.list[i].statusText = '已派单-已外协'
            } else if (response.list[i].status == 24) {
              response.list[i].statusText = '供应商竣工'
            } else if (response.list[i].status == 25) {
              response.list[i].statusText = '已收货'
            } else if (response.list[i].status == 26) {
              response.list[i].statusText = '合格'
            } else if (response.list[i].status == 27) {
              response.list[i].statusText = '不合格'
            } else if (response.list[i].status == 41) {
              response.list[i].statusText = '报废'
            } else if (response.list[i].status == 42) {
              response.list[i].statusText = '可维修'
            } else if (response.list[i].status == 43) {
              response.list[i].statusText = '合格'
            } else if (response.list[i].status == 44) {
              response.list[i].statusText = '不合格'
            }
          }
        } else {
          for (let i = 0; i < response.list.length; i++) {
            if (response.list[i].status == 22) {
              response.list[i].statusText = '已外协'
            } else if (response.list[i].status == 23) {
              response.list[i].statusText = '已派单-已外协'
            } else if (response.list[i].status == 1) {
              response.list[i].statusText = '未开始'
            } else if (response.list[i].status == 21) {
              response.list[i].statusText = '已派单'
            } else if (response.list[i].status == 3) {
              response.list[i].statusText = '生产中'
            } else if (response.list[i].status == 4) {
              response.list[i].statusText = '待品检'
            } else if (response.list[i].status == 41) {
              response.list[i].statusText = '报废'
            } else if (response.list[i].status == 8) {
              response.list[i].statusText = '已完成'
            } else if (response.list[i].status == 42) {
              response.list[i].statusText = '可维修'
            } else if (response.list[i].status == 5) {
              response.list[i].statusText = '品检中'
            } else if (response.list[i].status == 51) {
              response.list[i].statusText = '待入库'
            } else if (response.list[i].status == 6) {
              response.list[i].statusText = '入库中'
            } else if (response.list[i].status == 7) {
              response.list[i].statusText = '出库中'
            } else if (response.list[i].status == 41) {
              response.list[i].statusText = '报废'
            } else if (response.list[i].status == 42) {
              response.list[i].statusText = '可维修'
            } else if (response.list[i].status == 43) {
              response.list[i].statusText = '合格'
            } else if (response.list[i].status == 44) {
              response.list[i].statusText = '不合格'
            }
          }
        }

        this.listExternal = response.list
        this.listQuality = response.list
        console.log(this.list)
      })
    }
  }
}
</script>
<style scoped>
</style>
